<template>
  <div class="login-container">
    <el-card class="login-form">
      <img
        src="http://likede2-admin.itheima.net/img/logo.595745bd.png"
        class="login-logo"
        alt=""
      >
      <el-form ref="user" :model="user" status-icon :rules="rules">
        <el-form-item prop="loginName">
          <el-input
            v-model="user.loginName"
            prefix-icon="el-icon-mobile-phone"
            autocomplete="off"
            placeholder="请输入账号"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="user.password"
            type="password"
            autocomplete="off"
            prefix-icon="el-icon-lock"
            show-password
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item prop="code">
          <el-row>
            <el-col :span="17">
              <el-input
                v-model="user.code"
                prefix-icon=""
                placeholder="请输入验证码"
              />
            </el-col>
            <el-col :span="7">
              <img
                :src="
                  'http://likede2-admin.itheima.net/likede/api/user-service/user/imageCode/' +
                    user.clientToken
                "
                alt=""
                class="code-image"
                @click="checkCode"
              >
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button
            class="login-btn"
            type="primary"
            @click="submitForm()"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'LoginPage',
  data() {
    return {
      user: {
        loginName: process.env.NODE_ENV === 'development' ? 'admin' : '',
        password: process.env.NODE_ENV === 'development' ? 'admin' : '',
        code: '',
        clientToken: '',
        loginType: 0
      },
      rules: {
        loginName: [
          { required: true, message: '请输入账户', trigger: 'blur' },
          { min: 1, max: 18, message: '限制输入1-20个字符', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      }
    }
  },
  async created() {
    this.checkCode()
  },
  methods: {
    async submitForm() {
      this.$refs.user.validate()
      await this.$store.dispatch('user/login', this.user)
      this.$router.push('/')
    },
    generateRandomString() {
      const characters =
        '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
      let result = ''
      for (let i = 0; i < 32; i++) {
        result += characters.charAt(
          Math.floor(Math.random() * characters.length)
        )
      }
      return result
    },
    checkCode() {
      const char = this.generateRandomString()
      this.user.clientToken = char
    }
  }
}
</script>

<style lang="scss">
body {
  margin: 0;
}
.login-container {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background-image: url(http://likede2-admin.itheima.net/img/background.be4fae7d.png);
  background-repeat: no-repeat;
  background-size: cover;
  .login-form {
    position: absolute;
    width: 518px;
    height: 388px;
    top: 50%;
    left: 50%;
    margin-top: -194px;
    margin-left: -259px;
    padding: 76px 20px 0;
    background: #fff;
    -webkit-box-shadow: 0 3px 70px 0 rgba(30, 111, 72, 0.35);
    box-shadow: 0 3px 70px 0 rgba(30, 111, 72, 0.35);
    border-radius: 10px;
    overflow: visible;
    .el-form-item__content {
      line-height: 50px;
      position: relative;
      font-size: 14px;
      .el-input__inner {
        height: 50px;
      }
    }
  }
  .login-logo {
    position: absolute;
    width: 96px;
    height: 96px;
    top: -46px;
    left: 50%;
    margin-left: -48px;
    z-index: 10;
  }
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    span:first-of-type {
      margin-right: 16px;
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: #889aa4;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;
    .title {
      font-size: 26px;
      color: #999;
      margin: 0 auto 40px auto;
      text-align: center;
      font-weight: 700;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .code-image {
    display: block;
    width: 100%;
    height: 50px;
  }

  .login-btn {
    width: 100%;
    height: 52px;
    background: linear-gradient(262deg, #2e50e1, #6878f0);
    opacity: 0.91;
    border-radius: 8px;
    color: #fff;
    text-shadow: 0 7px 22px #cfcfcf;
  }
}
</style>
